<template>
  <div class="talk_window">
    <ul class="window_icon">
      <li @click="changeChatFullScreen" class="cursor_pointer">
        <p>
          <el-icon class="talk-icon-operate">
            <full-screen v-if="chatFullScreen" color="#121212" />
            <copy-document v-else color="#121212" />
          </el-icon>
        </p>
      </li>
      <li @click="closeChatWindow" class="cursor_pointer">
        <p>
          <el-icon color="#121212">
            <close />
          </el-icon>
        </p>
      </li>
    </ul>
    <chat-panel v-if="messagePanelStatus === 'chat'">
    </chat-panel>
    <new-friend v-else-if="messagePanelStatus === 'new_friend'">
    </new-friend>
    <div v-else></div>
  </div>
</template>
<script>
import { defineComponent, ref, computed } from "vue";
import { Close, CopyDocument, FullScreen, Rank } from "@element-plus/icons-vue";
import NewFriend from "./new-friend.vue";
import ChatPanel from "./chat-panel.vue";
import { useChatStore } from "../../../store/chat";

export default defineComponent({
  name: "chat-message",
  components: {
    ChatPanel,
    NewFriend,
    FullScreen,
    CopyDocument,
    Close,
    Rank,
  },
  setup() {
    const chatStore = useChatStore();
    const chatFullScreen = computed(() => chatStore.fullChat);
    const messagePanelStatus = computed(() => chatStore.panelStatus);
    const changeChatFullScreen = () => {};
    const closeChatWindow = () => {
      chatStore.showChatAction(false);
    };
    return {
      chatFullScreen,
      messagePanelStatus,
      closeChatWindow,
      changeChatFullScreen,
    };
  },
});
</script>
<style lang="less" scoped>
@import "src/pages/wechat/wechat.less";
/*******聊天窗口******/
.full-talk_window {
  width: calc(100vw - 310px) !important;
}

.talk_window {
  width: 100%;
  height: 100%;
  background: #fefefe;

  .window_icon {
    position: absolute;
    top: 0px;
    right: 0;
    z-index: 22;
    display: flex;

    p {
      text-align: center;

      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }

    li {
      width: 34px;
      height: 34px;
      position: relative;
      cursor: pointer;

      &:hover {
        background: #e3e3e3;
      }
    }
  }
  .window_empty {
    width: 100%;
    height: 100%;
    background: url("https://fengnull.gitee.io/picture_house/chat/chat_bg.png") no-repeat center
      center;
  }
}
</style>